<template>    
    <div class="large-page">
        <div id="map"></div>
        <div id="notification"></div>
    </div>
</template>

<script>
export default {
    name:'MyGISMap',
    components: {
    },
    props: {    
    },
    data () {
        return {         
          btn:true,  //默认true为显示
        }
    },
    methods:{  

      mapOnLoad(){

             // init tianditu maps
            var vec = L.KqGIS.tiandituTileLayer({layerType: "vec"});
            var img = L.KqGIS.tiandituTileLayer({layerType: "img"});
            var ter = L.KqGIS.tiandituTileLayer({layerType: "ter"});
            var cva = L.KqGIS.tiandituTileLayer({layerType: "cva"});
            var eia = L.KqGIS.tiandituTileLayer({layerType: "eia"});

            var baseMaps = {
              "矢量图层": vec,
              "影像图层": img,
              "地形晕染图层": ter
            };

            var overlays = {
              "中文注记图层": cva,
              "英文注记图层": eia
            };
           
            var map = L.map('map', {                
                zoomControl: true,
                center: [34, 114],
                zoom: 7,
                attributionControl: false,
                layers: [vec, cva]
            });

            //添加常用底图图层切换按钮
            L.control.layers(baseMaps, overlays).addTo(map).setPosition("topleft");

            //L.KqGIS.tiandituTileLayer({ layerType: 'vec' }).addTo(map);
            //L.KqGIS.tiandituTileLayer({ layerType: 'cva' }).addTo(map);           

            let ZTT = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007GSRKSL/map";
            L.KqGIS.tileMapLayer(ZTT, {}).addTo(map);

            // 添加鹰眼控件
            var img = L.KqGIS.tiandituTileLayer({ layerType: "img", attribution: null });
            new L.Control.MiniMap(img).addTo(map);   
            
             // 创建一个绘制图层
             var editableLayers = new L.FeatureGroup();
            map.addLayer(editableLayers);

            // 捕捉绘制控件参数设置
            var pm_options = {
                position: 'topright', // 控件位置
                drawMarker: true, // marker绘制是否可选
                drawPolygon: true, // drawPolygon绘制是否可选
                drawPolyline: true, // drawPolyline绘制是否可选
                editPolygon: true, // editPolygon编辑是否可选
                deleteLayer: true
            };

            // 添加捕捉绘制控件
            map.pm.addControls(pm_options);
      }

    },
    created(){     
    },
    mounted(){      
      this.mapOnLoad();
    },
    watch:{},
    computed:{    
    }        
}      

</script>

<style scoped>
.large-page {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 #map {
    /* position: inherit; */
    /* width: calc( 100vw - 120px );
    height: calc( 100vh - 50px ); */
    width: 100%;
    height: 100%;
    background-color: rgb(40, 230, 230);
 }
</style>
